<template>
  <view class="container" :style="appThemeStyle">
    <view v-for="item in shopList" :key="item.shopId" class="cell-group">
      <view class="cell-item">
        <view class="label title">{{ item.shopName }}</view>
        <view class="value" />
      </view>
      <view
          v-for="channel in item.channels"
          :key="channel.id"
          class="cell-item"
          @click="handlePopupVisible(true, item.shopId, channel)"
      >
        <view class="label">{{ channel.channelName }}</view>
        <view class="value">
          <text class="mode">{{ formatChannelOnlineStatus(channel.onlineStatus) }}</text>
          <text class="iconfont icon-arrow-right" />
        </view>
      </view>
    </view>

    <!-- 设置门店渠道在线状态弹窗 -->
    <u-action-sheet
        v-model="showActionSheet"
        :list="actionList"
        :border-radius="24"
        safe-area-inset-bottom
        @click="selectItem"
        @close="handlePopupVisible(false)"
    />
  </view>
</template>
<script>
import { getShopsStatus, updateShopsStatus } from "@/api/message/settings";

export default {
  name: "online",
  data() {
    return {
      shopList: [],
      actionList: [{ text: '在线', value: 0 }, { text: '忙碌', value: 1 }],
      selectedIndex: 0,
      showActionSheet: false,
      selectChannel: {}
    }
  },
  onLoad() {
    this.getShopList()
  },
  methods: {
    /**
     * 获取数据列表
     */
    getShopList() {
      getShopsStatus().then(res => {
        const { data } = res
        this.shopList = data || []
      }).catch(reason => {})
    },
    /**
     * 格式化渠道在线状态
     * @param status
     */
    formatChannelOnlineStatus(status) {
      return this.actionList.find(item => item.value === status)?.text || ''
    },
    /**
     * 显示/关闭弹窗
     * @param visible
     * @param shopId
     * @param channel
     */
    handlePopupVisible(visible, shopId = '', channel = {}) {
      if (shopId) {
        this.selectChannel = { shopId, ...channel }
      } else {
        this.selectChannel = {}
      }
      this.showActionSheet = visible
    },
    /**
     * 弹窗选中
     * @param index
     */
    selectItem(index) {
      const { shopId } = this.selectChannel
      this.selectedIndex = index
      this.showActionSheet = false
      this.updateShopStatus(this.actionList[index].value, shopId, this.selectChannel)
    },
    /**
     * 更新门店渠道状态
     */
    updateShopStatus(value, shopId, channel) {
      const { id } = channel
      const findChannel = this.shopList
          .find(shopItem => shopItem.shopId === shopId)
          .channels
          .find(channelItem => channelItem.id === id)
      // 一致不需要更新
      if (findChannel.onlineStatus === value) {
        return
      }
      updateShopsStatus({
        id,
        onlineStatus: value
      }).then(res => {
        const { data } = res
        if (data) {
          this.$toast('操作成功')
          findChannel.onlineStatus = value
          return
        }
        this.restoreSwitch(value, shopId, channel)
      }).catch(reason => {
        this.restoreSwitch(value, shopId, channel)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 24rpx;

  .cell-group {
    padding: 16rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-top: 16rpx;

    .cell-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border: none;
      }

      .label {
        font-size: 28rpx;
        color: #333333;
      }

      .value {
        display: flex;
        align-items: center;

        .mode {
          font-size: 28rpx;
          color: #666666;
          margin-right: 16rpx;
        }

        .iconfont {
          color: #CCCCCC;
          font-size: 40rpx;
        }
      }

      .title {
        font-size: 28rpx;
        color: #666666;
      }
    }
  }

  .popup-content {
    padding: 24rpx;

    .page-title {
      text-align: center;
      margin-bottom: 40rpx;
      font-size: 36rpx;
      font-weight: bold;
    }

    .list {
      min-height: 35vh;

      .item {
        margin-bottom: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 16rpx;
        border: 1rpx solid var(--eeeeee, #EEE);
        padding: 24rpx;
        font-size: 26rpx;

        &.active {
          border: 1rpx solid #2D71FD;

          .name {
            font-weight: bold;
          }
        }

        .selected {
          color: #2D71FD;
          font-size: 40rpx;
        }
      }
    }
  }
}
</style>
